Razor Pages 教程

1. 简介

Razor Pages 是 ASP.NET Core 中的一种网页开发模型，它简化了构建基于页面的应用程序的过程。Razor Pages 使用 Razor 语法来混合 C# 代码和 HTML，使得页面逻辑和视图可以紧密结合。

1.1 为什么选择 Razor Pages？

• 简化开发：Razor Pages 使得页面逻辑和视图的分离更加直观。
• 适合页面驱动应用：特别适合那些以页面为中心的应用，如博客、新闻网站等。
• 易于学习：对于初学者来说，Razor Pages 比 MVC 更容易上手。

2. 环境搭建

在开始之前，确保你已经安装了以下工具：

• Visual Studio：推荐使用最新版本的 Visual Studio。
• .NET SDK：确保你已经安装了最新版本的 .NET SDK。

2.1 创建新的 Razor Pages 项目

1. 打开 Visual Studio。
2. 选择 "Create a new project"。
3. 选择 "ASP.NET Core Web App" 模板。
4. 命名你的项目并选择保存位置。
5. 在 "Additional information" 窗口中，选择 "Razor Pages" 并确保选择了 .NET Core 版本。
6. 点击 "Create"。

3. 项目结构

创建项目后，你会看到以下文件和文件夹结构：

MyRazorApp/
│
├── Pages/
│   ├── Index.cshtml
│   ├── Index.cshtml.cs
│   ├── Privacy.cshtml
│   ├── Privacy.cshtml.cs
│   └── Shared/
│       └── _Layout.cshtml
│
├── wwwroot/
│   ├── css/
│   ├── js/
│   └── lib/
│
├── appsettings.json
├── Program.cs
└── Startup.cs

3.1 关键文件解释

• Pages/：包含所有的 Razor 页面。每个页面通常有两个文件：.cshtml 文件用于视图，.cshtml.cs 文件用于页面模型。
• wwwroot/：存放静态资源，如 CSS、JavaScript 和图像。
• appsettings.json：配置文件，用于存储应用程序的设置。
• Program.cs 和 Startup.cs：用于配置应用程序的启动和运行时行为。

4. 创建第一个 Razor Page

4.1 创建页面

1. 在 Pages 文件夹中，右键点击并选择 "Add" -> "New Item"。
2. 选择 "Razor Page" 模板。
3. 命名页面为 HelloWorld.cshtml。
4. 点击 "Add"。

4.2 编写页面模型

打开 HelloWorld.cshtml.cs 文件，编写以下代码：

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyRazorApp.Pages
{
    public class HelloWorldModel : PageModel
    {
        public string Message { get; set; }

        public void OnGet()
        {
            Message = "Hello, World!";
        }
    }
}

4.3 编写视图

打开 HelloWorld.cshtml 文件，编写以下代码：

@page
@model MyRazorApp.Pages.HelloWorldModel

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>@Model.Message</h1>
</body>
</html>

4.4 运行项目

1. 按 F5 或点击 "Start" 按钮运行项目。
2. 在浏览器中访问 /HelloWorld，你应该会看到 "Hello, World!" 的页面。

5. 基本语法和数据绑定

5.1 Razor 语法

Razor 语法允许你在 HTML 中嵌入 C# 代码。常用的 Razor 语法包括：

• @：用于开始 C# 代码块。
• @()：用于内联表达式。
• @{}：用于多行代码块。

5.2 数据绑定

在 Razor Pages 中，数据绑定是通过页面模型和视图之间的属性来实现的。例如：

public class IndexModel : PageModel
{
    public string Title { get; set; } = "Welcome to My Razor App";
}

在视图中，你可以通过 @Model 访问这些属性：

<h1>@Model.Title</h1>

6. 实践练习

6.1 练习：创建一个简单的表单

1. 创建一个新的 Razor Page，命名为 Contact.cshtml。
2. 在 Contact.cshtml.cs 中添加以下代码：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyRazorApp.Pages
{
    public class ContactModel : PageModel
    {
        [BindProperty]
        public string Name { get; set; }

        [BindProperty]
        public string Email { get; set; }

        public void OnPost()
        {
            // 处理表单提交
        }
    }
}

3. 在 Contact.cshtml 中添加以下代码：

@page
@model MyRazorApp.Pages.ContactModel

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" />
        <br />
        <button type="submit">Submit</button>
    </form>
</body>
</html>

4. 运行项目并访问 /Contact，尝试提交表单。

7. 总结

通过本教程，你已经学会了如何创建和运行一个简单的 Razor Pages 应用程序。Razor Pages 提供了一种直观的方式来构建页面驱动的应用程序，适合初学者和有经验的开发者。

7.1 下一步

• 学习如何使用布局和部分视图来重用代码。
• 探索如何使用依赖注入来管理服务。
• 深入了解如何处理表单提交和数据验证。

希望本教程能帮助你更好地理解和使用 Razor Pages！